/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d'),
        paused = true,
        //定义圆圈的相关参数
        discs = [
    {
           x:150,
           y:75,
           lastX:250,
           lastY:250,
           velocityX: -3.2 ,
           velocityY: 3.5,
           radius:25,
           innerColor: 'rgba(255,255,0,1.0)',//red green blue alpha
           middleColor:'rgba(255,255,0,0.7)',
           outerColor:'rgba(255,255,0,0.5)',
           strokeStyle:'gray'
        },
        {
           x:50,
           y:150,
           lastX:50,
           lastY:150,
           velocityX: 2.2 ,
           velocityY: 2.5,
           radius:25,
           innerColor: 'rgba(100,145,230,1.0)',
           middleColor:'rgba(100,145,230,0.7)',
           outerColor:'rgba(100,145,230,0.5)',
           strokeStyle:'blue'
        },
        {
           x:150,
           y:75,
           lastX:150,
           lastY:75,
           velocityX: 1.2 ,
           velocityY: 1.5,
           radius:25,
           innerColor: 'rgba(255,0,0,1.0)',
           middleColor:'rgba(255,0,0,0.7)',
           outerColor:'rgba(255,0,0,0.5)',
           strokeStyle:'gray'
        },
        {
           x:50,
           y:175,
           lastX:150,
           lastY:75,
           velocityX: 3.2 ,
           velocityY: 2.5,
           radius:25,
           innerColor: 'rgba(255,0,0,1.0)',
           middleColor:'rgba(255,0,0,0.7)',
           outerColor:'rgba(255,0,0,0.5)',
           strokeStyle:'gray'
        }
    ];
    numDiscs = discs.length;
    animatieButton = document.getElementById('animateButton');
    
    //画背景
    function drawBackground(){
        var STEP_Y = 12,
                TOP_MARGIN = STEP_Y * 3,
                LEFT_MARGIN = STEP_Y * 4,
                i = context.canvas.height;
        context.strokeStyle = 'lightgray';
        context.lineWidth = 0.5;
        
        while(i > TOP_MARGIN){
            //划横线
            context.beginPath();//创建路径
            context.moveTo(0,i);//起笔坐标
            context.lineTo(context.canvas.width,i);//结束坐标
            context.stroke();//填充
            i -= STEP_Y;
        }
        
//        画竖线
        context.strokeStyle = 'rgba(100,0,0,0.3)';
        context.lineWidth = 1;
        context.beginPath();
        context.moveTo(LEFT_MARGIN,0);
        context.lineTo(LEFT_MARGIN,context.canvas.height);
        context.stroke();
//        
    }
    

    //计算临界值
    function update(){
        var disc = null;
        for(var i=0;i < numDiscs; ++i){
            disc = discs[i];
            if(disc.x + disc.velocityX + disc.radius > context.canvas.width || disc.x + disc.velocityX - disc.radius < 0) disc.velocityX = -disc.velocityX;  //x轴临界值
            if(disc.y + disc.velocityY + disc.radius > context.canvas.height || disc.y + disc.velocityY - disc.radius < 0) disc.velocityY = -disc.velocityY; //Y轴临界值
            
            disc.x += disc.velocityX;
            console.log(i)
            console.log(disc.x);
            console.log(disc.y);
            console.log(context.canvas.height);
            disc.y += disc.velocityY;
            
        }
    }
    
    //画渐变圆
    function draw(){
        var disc = null;
        for(var i=0;i<numDiscs;++i){
            disc = discs[i];
//            console.log(disc.x);
//            console.log(disc.y);
            gradient = context.createRadialGradient(disc.x,disc.y,0,disc.x,disc.y,disc.radius);//绘制一个矩形，并用放射状/圆形渐变进行填充：
            gradient.addColorStop(0.3,disc.innerColor);
            gradient.addColorStop(0.5,disc.middleColor);
            gradient.addColorStop(1.0,disc.outerColor);
            context.save();
            
            context.beginPath();
            context.arc(disc.x,disc.y,disc.radius,0,Math.PI*2,false);//画圆
            context.fillStyle = gradient;//用矩形填充
            context.strokeStyle = disc.strokeStyle;
            context.fill();//填充
//            context.stroke();
            context.restore();
            
        }
    }
    
    //计算帧速率
    var lastTime = 0;
    function claculateFps(){
        var now = (+new Date);
        fps =1000 / (now - lastTime)
        lastTime = now;
        return fps;
        
    }
    
    //animation
    function animate(time){
        if(!paused){
            context.clearRect(0,0,canvas.width,canvas.height);
            drawBackground();
            update();
            draw();
            
            context.fillStyle = 'cornflowerblue';
            context.fillText(claculateFps().toFixed() + 'fps',20,60);
            window.requestNextAnimationFrame(animate);
        }
    }
    
    //绑定事件
    animateButton.onclick = function(e){
        paused = paused ? false : true;
        if(paused){
            animateButton.value = 'Animate';
        }else{
            window.requestNextAnimationFrame(animate);
            animateButton.value = 'Pause';
        }
    };
    
    context.font = '48px Helvetica';
    
    